<template>
	<view>
		<image src="/static/sybj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image @click="fanhui" src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" :style="'margin-top:'+top+'px;'">
				业主管理
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="box">
			<view class="box1">
				房产信息
			</view>
			<picker mode="multiSelector" @change="bindPickerChange2" @columnchange="gaibianzhuzhi"
				:value="buildingindex" :range="buildinglist" range-key="title">
				<view class="box2">
					<view class="" style="margin-left: 10rpx;">
						{{buildinglist[0][buildingindex[0]].title}}
						{{buildinglist[1][buildingindex[1]].title}}
						{{buildinglist[2][buildingindex[2]].title}}
					</view>
					<image src="/static/xsjl.png" mode=""></image>
				</view>
			</picker>
			<view class="box1">
				绑定时间
			</view>
			<view class="box2" @click="datetime">
				<view class="">
					{{timedate}}
				</view>
				<image src="/static/xsjl.png" mode=""></image>
			</view>
			<view class="box1">
				业主姓名/手机号
			</view>
			<view class="box2">
				<input style="padding-left: 20rpx;" type="text" placeholder="请输入" v-model="keyword">
			</view>
			<view class="box3">
				<view class="box3-1" @click="fanhui">
					取消
				</view>
				<view class="box3-2" @click="zhixing">
					确定
				</view>
			</view>
		</view>
		<uni-datetime-picker style="opacity: 0;" ref="picker" :end="endData" v-model="range" type="daterange"
			@change="maskClick">
			<div></div>
		</uni-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				buildingindex: [0, 0, 0],
				range: [],
				timedate: '',
				buildinglist: [],
				endData: '',
				roomId: '',
				keyword: '',
				value: '',
				index: '',
			}
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
				this.timedate = this.range[0] + ' ' + this.range[1]
				console.log(this.timedate);
			},
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 6
			this.getbuilding()
			this.getDate()
		},
		methods: {
			maskClick(e) {
				console.log(e);
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			zhixing() {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				console.log(prevPage);
				prevPage.$vm.roomId = this.roomId
				prevPage.$vm.bindtime = this.timedate
				prevPage.$vm.keyword = this.keyword
				uni.navigateBack({
					delta: 1
				})
			},
			datetime() {
				this.$refs.picker.show()
			},
			gaibianzhuzhi(e) {
				console.log(e.detail.column, e.detail.value);

				if (e.detail.column == 0) {
					this.$post('wuyecenter/getdanyuan', {
						buildingId: this.buildinglist[0][e.detail.value].id
					}, res => {
						this.buildinglist[1] = res.data.list[0]
						this.buildinglist[2] = res.data.list[1]
						this.$forceUpdate()
					})
				} else if (e.detail.column == 1) {
					this.$post('wuyecenter/getroomlist', {
						unitId: this.buildinglist[1][e.detail.value].unitId
					}, res => {
						this.buildinglist[2] = res.data.list
						this.$forceUpdate()
					})
				}
			},
			getbuilding() {
				this.$post('wuyecenter/getbuilding', {}, res => {
					this.buildinglist = res.data.list
					this.roomId = res.data.list[2][0].roomId

					// this.building[0]=res.data.list[0].[0].
				})
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.endData = `${year}-${month}-${day}`;
			},
			bindPickerChange2(e) {
				console.log(e.detail.value);
				this.buildingindex = e.detail.value
				this.roomId = this.buildinglist[2][e.detail.value[2]].roomId

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #e5e5e5;
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 20rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}

	.toptit {
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
	}

	.box {
		background-color: #ffffff;
		width: 100%;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.box1 {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 37rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 20rpx;
	}

	.box2 {
		width: 686rpx;
		height: 77rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #eaf2ff;
		line-height: 77rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			margin-right: 30rpx;
			width: 16rpx;
			height: 9rpx;
		}
	}

	.box3 {
		width: 686rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.box3-1 {
		width: 331rpx;
		height: 90rpx;
		border: #7caafd solid 2rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		line-height: 90rpx;
		text-align: center;
	}

	.box3-2 {
		width: 331rpx;
		height: 90rpx;
		background-color: #2e79fd;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
	}
</style>
